<template>
    <ul class="noticeList">
        <li v-for="dt in lists" :key="dt.bulletinId">
            <router-link :to="`/home/message/${dt.bulletinId}`">
                <h4>{{dt.title}}</h4>
                <p class="time">{{dt.createTime}}</p>
                <div class="con" v-html="dt.content">
                </div>
            </router-link>
        </li>
        
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {toast,mt} from '@/utils/common.js'
export default {
    props:{
        lists:Array
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state),
            mt
        }
    }
}
</script>

<style lang="scss" scoped>
    .noticeList{
        padding: 0 0 30px 0;
        margin: 0;
        list-style: none;
        li{
            &+li{
                margin: 30px 0 0 0;
            }
            a{
                display: block;
                height: 210px;
                border-bottom:1px solid rgba(255, 255, 255, 0.2) ;
                padding: 0 0 30px 0;
                line-height: normal;
                h4{
                    font-size: 30px;
                    font-weight: 500;
                    height: 46px;
                    line-height: 46px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }
                .time{
                    font-size: 24px;
                    color: #809191;
                    padding: 10px 0 0 0;
                }
                .con{
                    font-size: 28px;
                    color: #809191;
                    line-height: 44px;
                    padding: 10px 0 0 0;
                    height: 100px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
</style>